<template lang='pug'>
.drawtip(ref='drawTooltip' :style="{left:backInf.pos.x+'px',top:backInf.pos.y+'px'}")
    .drawTipMsg(v-if="backInf.type=='msg'") {{backInf.msg}}
    .drawTipBtns(v-if="isgeo()")
        .tip_btn(@click="tipOn('move')") M
        .tip_btn(@click="tipOn('add')" v-if="backInf.type!='dot'") +
        .tip_btn(@click="tipOn('del')") -
    
</template>
<script>
import { eventBus } from "../eventBus";
var DrawMode={ //
    None:0,
    Modify:2,
    Create:1
}
let Cesium = require('cesium/Cesium');
export default {
    name: 'pop1',
    data() {
        return {
            viewer:null,
            Cesium:null,
            pos:new Cesium.Cartesian3.fromDegrees(110.20, 34.55, 1),
            showMode:'',
            dots:[],
            ploylines:[],
            ploygons:[],
            marks:[],
            backInf:{
                type:'none',
                pos:{x:0,y:0},
                msg:'点石成金',
                hid:-1
            }
        }
    },
    computed:{
    },
    props: {
        inf: {type:Object}
    },
    watch: {
        inf: {
            handler(){
                let llh=this.inf.llh
                this.pos=new Cesium.Cartesian3.fromDegrees(llh.lon,llh.lat,llh.hei)
                this.load()
            }
        },
        deep: true,
        immediate:true
    },
    mounted () {
        let t=this
        t.$nextTick(()=>{
            t.viewer=t.$parent.viewer
            t.Cesium=t.$parent.Cesium
            t.viewer.clock.onTick.addEventListener(function(clock) {
                t.load();
            })
            eventBus.$on('tooltip',(e)=>{
                Object.assign(this.backInf,e)
            })
        })
        
    },
    methods:{
        isgeo(){
            console.log(this.backInf.type)
            return ['dot','line','ploygon'].indexOf(this.backInf.type)>-1
        },
        tipOn(msg){
            eventBus.$emit('tipEvent',{
                msg:msg,
                hid:this.backInf.hid
            })
        },
        load() {
        }
    }

}
</script>
<style lang="scss" scoped>
.drawtip{
    z-index: 999;
    position:absolute;
    pointer-events: none;
    color: white;
    .drawTipBtns{
        position:absolute;
        pointer-events: all;
        height: 32px;
        display: flex;
        .tip_btn{
            border: 1px solid black;
            background: rgba($color: gray, $alpha: .70);
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 22px;
        }
    }
    .drawTipMsg{
        border: 1px solid black;
        background: rgba($color: gray, $alpha: .70);
        text-align: left;
        line-height:24px; 
        font-size: 16px;
        max-width: 250px;
    }

    // background: white;
}
</style>